<template>
  <div class="facility-statistics">
    <div class="title">设备统计</div>
    <dv-decoration-6 style="width: 300px; height: 30px" />

    <div class="content">
      <div class="item totalnum">
        <dv-digital-flop
          :config="configTotalNum"
          style="width: 100px; height: 50px"
        />
        <div class="label">设备总数</div>
      </div>

      <div class="item">
        <div class="chart" ref="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Charts from "@jiaminghi/charts";
export default {
  data() {
    return {
      chart: null,
      configTotalNum: {
        number: [100],
        content: "{nt}台",
      },
      config: {
        series: [
          {
            type: "pie",
            outsideLabel: {
              labelLineEndLength: 10,
            },
            data: [
              { name: "心率监测设备", value: 93 },
              { name: "呼吸监测设备", value: 32 },
              { name: "一氧化碳监测设备", value: 65 },
              { name: "温度监测设备", value: 44 },
              { name: "湿度监测设备", value: 52 },
            ],
            radius: ["40%", "50%"],
            insideLabel: {
              show: true,
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.chart = new Charts(this.$refs.chart);
    this.initData();
  },
  methods: {
    initData() {
      this.chart.setOption(this.config);
      setInterval(() => {
        this.configTotalNum.number = [Math.floor(Math.random() * 1000)];
        this.configTotalNum = { ...this.configTotalNum };
      }, 3000);
    },
  },
};
</script>

<style scoped>
.facility-statistics {
  padding: 20px;
}
.title {
  font-size: 20px;
}

.chart {
  width: 250px;
  height: 240px;
}

.content {
  display: flex;
  justify-content: center;
}
.totalnum {
  width: 250px;
  height: 240px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>